<!DOCTYPE html>
<html lang="" data-theme="Light0">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
    <title>主页</title>
    <meta name="description" content="梦想建广厦千万间，与天下寒仕俱欢颜......">
    <meta name="keywords" content="个人主页，简历，引导页，dony，donymh">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        user-select: none;
        transition: background-color 0.2s ease;
      }

      .mh-loading {
        background: radial-gradient(white, #d8eaff);
        background-size: 100%;
        background-position: center;

        height: 100%;
        width: 100%;
        position: fixed;
        z-index: 999999;
        margin-top: 0px;
        top: 0px;
        pointer-events: none;
        opacity: 1;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .mh-loading-center {
        height: 150px;
        width: 150px;
        position: relative;
        border-radius: 50%;
        background: #472eff;
        animation: zoom 1s linear infinite;
      }

      @keyframes zoom {
        0% {
            transform: scale(0);
            opacity: 1;
        }

        50% {
            opacity: 0.5;
        }

        100% {
            transform: scale(1);
            opacity: 0;
        }
      }
    </style>
  </head>
  <body>
    <div id="MhLoading" class="mh-loading">
      <div id="MhLoadingCenter" class="mh-loading-center"></div>
    </div>
    <div class="mh-filter"></div>

    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>

    <style>
      @media (max-width: 1200px) {
        .project-list .project-item.surprise,
        .project-list .project-item.project {
          width: calc(50% - 20px);
        }
    
        .project-list .project-item {
          margin: 10px;
        }
      }
    
      @media (max-width: 960px) {
        /* 弹窗样式 */
        .base-dialog-body {
          width: 80% !important;
        }
    
        /* 页面容器样式 */
        .page-container .left-view__content {
          display: none;
        }
    
        .page-container .right-view {
          width: 100%;
          padding: 20px 12px;
        }
    
        /* 右视图内容样式 */
        .page-container .right-view .left-view__content-logo.index-logo {
          display: block;
          flex-shrink: 0;
          width: 40%;
          margin: 0 auto;
          position: relative;
          max-width: 200px;
          aspect-ratio: 1/1;
          background-size: cover;
          border-radius: 50%;
          border: 0.5px solid #ffffff;
        }
    
        .page-container .right-view .welcome {
          font-size: 10vw;
          margin: 2vw 0;
        }
    
        .page-container .right-view .description,
        .page-container .right-view .description .text-background {
          font-size: 4vw;
        }

        .page-container .right-view .description.certificate,
        .page-container .right-view .description.intention {
          display: block;
        } 
    
        .page-container .right-view .mh-options-wrap {
          margin-top: 4vw;
        }
    
        .page-container .right-view .snake-container {
          width: 100%;
        }
    
        /* 项目列表样式 */
        .page-container .right-view .project-list .project-item {
          padding: 10px;
          margin: 9px; 
          width: calc(50% - 18px);
        }
    
        .page-container .right-view .project-list .project-item.project {
          height: auto;
          margin: 9px;
          width: calc(100% - 18px);
        }
    
        .page-container .right-view .project-list .project-item .project-item-left p {
          font-size: 14px;
        }
    
        .page-container .right-view .project-list .project-item .project-item-left h1 {
          font-size: 18px;
        }
    
        .page-container .right-view .project-list .project-item:hover h1 {
          font-size: 20px;
        }
    
        .page-container .right-view .project-list .project-item.surprise .project-item-right,
        .page-container .right-view .project-list .project-item.surprise .project-item-right img {
          display: none;
        }
    
        .page-container .right-view .project-list .project-item.surprise .project-item-left {
          width: 100%;
        }

        .page-container .right-view .right-mystery-box .cube-container {
          justify-content: center;
        }

        .page-container.p-20 .page-container__ai-content {
          width: 100%;
        }

        .page-container .right-view .right-skills .icon-pc {
          display: none;
        }

        .page-container .right-view .right-skills .icon-mobile {
          display: block;
        }
      }
    </style>
  </body>
</html>
